<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10_v-model的使用</title>
</head>

<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取]或[设置]表单元素的内容
     -->
    <!-- v-model 用在表单元素上 快速获取或者设置数据 -->
    <!-- 语法 v-model="变量" -->
    账户: <input v-model="username" type="text"><br/>
    密码: <input v-model="password" type="password"><br/>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
       username: '',
       password: ''
      },
      methods: {
        login() {
          console.log(this.username, this.password);
          if (this.username && this.password) {
            console.log('可以登录了');
          } else {
            console.log('请填写信息')
          }
        },
        reset() {
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>

</html>